<template>
    <div v-if="data">
        <van-search
                v-model="keyword"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch">
            <template #left>
                <van-icon name="arrow-left" @click="goBack"/>
            </template>
            <template #action>
                <div @click="onSearch" class="searchTxt">搜索</div>
            </template>
        </van-search>
        <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1"/>
            <van-dropdown-item v-model="value2" :options="option2"/>
            <van-dropdown-item v-model="value3" :options="option3"/>
        </van-dropdown-menu>
        <van-card
                :price="list.retailPrice"
                :desc="list.brief"
                :title="list.name"
                :thumb="list.picUrl"
                v-for="list in data.list" :key="list.id"
                @click="toPage(list.id)"
        >
         <template #num>
             <div class="item">
                 <van-icon name="shopping-cart-o" size="20" color="#fff" />
             </div>
         </template>
        </van-card>
    </div>
</template>

<script>
    export default {
        name: "GoodsList",
        data() {
            return {
                keyword: '',
                value1: 0,
                value2: 'a',
                value3: 'a',
                option1: [
                    {text: '全部商品', value: 0},
                    {text: '新款商品', value: 1},
                    {text: '活动商品', value: 2},
                ],
                option2: [
                    {text: '默认排序', value: 'a'},
                    {text: '好评排序', value: 'b'},
                    {text: '销量排序', value: 'c'},
                ],
                option3: [
                    {text: '价格降序', value: 'a'},
                    {text: '价格升序', value: 'b'},
                ],
                data: null
            }
        },
        methods: {
            async onSearch() {
                // const get1 = await this.$get('goods/list?keyword=' + this.keyword)
                const get1 = await this.$get2('goods/list', {
                  keyword: this.keyword
                })
                this.data = get1.data.data
            },
            goBack() {
                this.$router.go(-1)
            },
            toPage(id) {
                this.$router.push({
                    name: 'goodsmsg',
                    query: {
                        id: id
                    }
                })
            }
        },
        async created() {
            // console.log(this.$route.query)
            const get1 = await this.$axios.get('goods/list?keyword=' + this.$route.query.keyword)
            this.data = get1.data.data
            console.log(get1)
        }
    }
</script>

<style lang="less" scoped>
  .van-icon-arrow-left {
    margin-right: 13px;
    font-size: 14px;
  }

  .searchTxt {
    margin-right: 25px;
  }

  .van-card {
    margin-bottom: 14px;
    background-color: #fff;
  }

  .van-card__num {
    >.item {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #F60C00;
      text-align: center;
      >.van-icon-shopping-cart-o {
        line-height: 30px;
      }
    }
  }
</style>
